<template>
  <div>
    <TableList
      ref="TableList"
      :model-value="searchFormData"
      request-url="system/category/list"
      request-method="get"
      :table-data="tableData"
      :table-column="tableColumn"
      :has-search="false"
      header-btn-text="新增分类"
    >

      <!-- 按钮区 -->
      <template #btns>
        <el-button size="small" type="primary" @click="drawer=true">新增分类</el-button>
      </template>

      <!-- 自定义status 列 -->
      <template #status="{ item, row }">
        <div>{{ ['删除', '启用', '禁用'][row[item]] }}</div>
      </template>

      <!-- 自定义operate 列 -->
      <template #operate="{ item, row }">
        <div style="display: flex; gap: 10px;">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <DeleteButton @delete-item="handleDelete(row)" />
        </div>
      </template>

    </TableList>

    <Form :visible="drawer" :title="defaultValue.id ?'修改分类' : '新增分类' " :default-value="defaultValue" @add-success="addSuccess" @close:drawer="drawer=false" />

  </div>
</template>

<script>
import TableList from '@/components/TableList'
import DeleteButton from '@/components/DeleteButton'
// import MyForm from '@/components/Test'
import Form from './form'
import { myMixin } from './data.js'
import { area } from '@/utils/area'
import request from '@/utils/request'

export default {
  components: {
    TableList,
    DeleteButton,
    Form
  },
  mixins: [myMixin],
  data() {
    return {
      drawer: false,
      searchFormData: {},
      defaultValue: {},
      province: (() => area.map(item => ({ value: item.ad_name, label: item.ad_name })))(),
      city: (() => {
        return area.reduce((pre, cur) => {
          const children = cur.children.map(item => ({ value: item.name, label: item.name }))
          pre = pre.concat(children)
          return pre
        }, [])
      })(),

      tableData: []
    }
  },
  created() {

  },
  methods: {
    addSuccess() {
      this.drawer = false
      this.$refs.TableList?.requestData()
    },
    async handleUpdate(row) {
      this.drawer = true
      // console.log(row.category, '--')
      this.defaultValue = {
        category: row.category,
        id: row.id
      }
    },
    handleDelete(row) {
      // this.handleDelete
      request({ url: `system/category/${row.id}`, method: 'delete' }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs['TableList'].requestData()
        } else {
          this.$message({
            message: '删除失败',
            type: 'warning'
          })
        }
      })
    }
  }

}
</script>
